<link rel="stylesheet" href="components/roomView/roomView.css" />

<div class="page-header col-xs-12">
	<div class="col-xs-3">
		<h3>
			<span id="ins_argjson_arg">房态盘</span> 
		</h3>
	</div>
</div>
<div class="row">
	<div class="col-xs-12">
		<div class="well well-sm">
			<table class="ui-pg-table" style="width:100%;table-layout:fixed;height:100%;">
				<tbody>
					<tr>
						<td align="left" width="45%">  
							<form id="form_header" class="form-horizontal" onSubmit="return false;" >
								<span style="position: relative;">
									<button id='refresh' class="refresh" style="margin-left:-2px; height:38px;" title="刷新">
										<i class="ace-icon fa fa-refresh blue bigger-120"></i>
									</button>
								</span>
								<select name="building" data-dict='房态盘AB楼' style="margin: 2px 2px 2px 2px;width:110px;">
			                 			<option value="">全部楼型</option>
								</select>
								<select name="rmtype" data-dict='#房型' style="margin: 2px 2px 2px 2px;width:110px;">
			                    		<option value="">全部房型</option>
			                   	</select>
								<select name="floor" data-dict='#楼层' style="margin: 2px 2px 2px 2px;width:110px;">
			                   			<option value="">全部楼层</option>
								</select>
				          	</form>
						</td>								
						<td align="right" width="30%">
							<div class="input-group" style="width:100%;">
								<button id="btnCancel" class="btn btn-sm btn-default" style="height:29px;margin-top: -3px;">
					          		<i class="ace-icon fa fa-undo"></i>
									返回
					          	</button>
						    </div>								
						</td>					
					</tr>
				</tbody>
			</table>
		</div>
		<div class="col-xs-12">
			<div class="col-xs-3">
				<div class="tabbable">
					<ul id="titleNavTab" class="nav nav-tabs" data-id="tab">
						<li class="active">
							<a data-toggle="tab" href="#tabHk" aria-expanded="false">
								<i class="blue ace-icon fa fa-home bigger-120"></i>房态盘
							</a>
						</li>
						<li>
							<a data-toggle="tab" href="#tabFastRsv" aria-expanded="true">
								<i class="blue ace-icon fa fa-registered bigger-120"></i>
								快速预定
							</a>
						</li>
					</ul>
					<div class="tab-content no-border">
						<div id="tabHk" class="tab-pane fade active in">
							<div class="widget-box ui-sortable-handle">
								<div class="widget-header widget-header-small">
									<h5 class="widget-title">查询条件</h5>
									<div class="widget-toolbar">
										<a href="javaScript:void(0);" data-action="collapse">
											<i class="ace-icon fa fa-chevron-up"></i>
										</a>
									</div>
								</div>
								<div class="widget-body">
									<div class="widget-main">
										<form id="form_content" onSubmit="return false;">
											<div class="form-group">
												<input id="allSearch" name="allSearch" class="ace" type="text" style="margin-left: 45px;width: 192px;" placeholder="房号"/> 
												<div class="btn-group">
													<button id="btnAllSearch" type="button" style="height: 28px;margin-top: -4px;" class="btn btn-xs btn-primary">
														<i class="fa fa-search"></i>
														查询
													</button>
												</div>
											</div>
											<div class="form-group">
												<label style="margin-left: 10px;"><strong>来源:</strong></label>
												<select data-dict='来源' name="source" style="width:60%;" class="input-mini spinbox-input" >
													<option value="">请选择...</option>
												</select>
											</div>
											<div class="form-group">
												<label style="margin-left: 10px;"><strong>市场:</strong></label>
												<select data-dict='#市场' name="market" style="width:60%;" class="input-mini spinbox-input" >
													<option value="">请选择...</option>
												</select>
											</div>
										</form>
									</div>
								</div>
							</div>
							<div class="tabbable tabs-left">
								<ul class="nav nav-tabs" style="width:30px;"> 
									<li class="active" style="width:30px;">
										<a style="padding: 4px;min-width: 30px;min-height:55px" data-toggle="tab" href="#houseKeeping" aria-expanded="true">
											<i class="pink ace-icon fa fa-tachometer bigger-110"></i>房务
										</a>
									</li>
								</ul>
								<div class="tab-content" style="padding:0px 0px;">
									<div id="houseKeeping" class="tab-pane active"> 
										<table style="margin-top: 5px" id="houseKeepingTable" ></table>
									</div>
								</div>
							</div>
						</div>



						<div id="tabFastRsv" class="tab-pane fade">
							<div class="widget-box ui-sortable-handle">
								<div class="widget-header widget-header-small">
									<h5 class="widget-title">查询条件</h5>
									<div class="widget-toolbar">
										<a href="javascript:void(0)" data-id="tabFastRsvSearchBtn" class="btn btn-primary btn-minier btn-round" data-i18n="查询">
											<i class="ace-icon fa fa-search"></i>查询
										</a>
										<a href="#" data-action="collapse">
											<i class="ace-icon fa fa-chevron-up"></i>
										</a>
									</div>
								</div>
								<div class="widget-body">
									<div class="widget-main" style="margin-left: 0px">
										<form data-id="fastRsv" onSubmit="return false;">
										 	<div class="input-group" style="width: 100%">
										 		<label style="float: left;margin-top: 5px;"><strong data-i18n="抵店:">抵店:</strong></label>
										 		<input name="arr_d" type="text" style="width:50%;float: left;margin: 2px 2px 2px 2px;">
									 		</div>
									 		<div class="input-group">
									 			<label style="float: left;margin-top: 10px;"><strong data-i18n="间夜:">间夜:</strong></label>
									 			<input name="nights" type="text" style="float:left;margin: 2px 2px 2px 2px;" class="input-mini spinbox-input">
								 			</div>
								 			<div class="input-group" style="width: 100%">
										 		<label style="float: left;margin-top: 5px;"><strong data-i18n="离店:">离店:</strong></label>
										 		<input name="exp_dep_d" type="text" style="width:50%;float: left;margin: 2px 2px 2px 2px;">
									 		</div>
								 			<div class="input-group">
								 				<label style="float: left;margin-top: 10px;"><strong data-i18n="人数:">人数:</strong></label>
								 				<input name="adults" type="text" style="float:left;margin: 2px 2px 2px 2px;" class="input-mini spinbox-input">
								 			</div>
							 			</form>
									</div>
								</div>
							</div>
							<div data-id="tabFastRsvProfile" class="widget-box ui-sortable-handle">
								<div class="widget-header widget-header-small">
									<h5 class="widget-title" data-i18n="客人档案">客人档案</h5>
									<div class="widget-toolbar">
										<a href="#" id="tabFastRsvSelProfileBtnClear" data-id="btnSelProfileClear" data-action="reload" data-i18n-title="清空" title="清空">
											<i class="ace-icon fa fa-refresh"></i>
										</a>
										<a href="#" data-action="collapse">
											<i class="ace-icon fa fa-chevron-up"></i>
										</a>
									</div>
								</div>
								<div class="widget-body">
									<div class="widget-main">
						 				<div class="input-group" style="width:90%">
							 				<label style="float: left;margin-top: 10px;" data-i18n="客档:">客档:</label>
						 					<span class="input-icon input-icon-right" style="width:55%">
						 					    <input data-id="tabFastRsvSelProfile" data-for="selProfile" data-about="tabFastRsvSelProfileBtn" value="" onfocus="this.blur()" type="text" style="float:left;margin: 2px 2px 2px 2px;width:100%; text-overflow:ellipsis" class="input-mini spinbox-input">
												<i id="tabFastRsvSelProfileBtn" data-id="btnSelProfile" class="ace-icon fa fa-caret-down bigger-150"></i>
											</span>
							 			</div>
						 				<div class="input-group" style="width:90%">
							 				<label style="float: left;margin-top: 10px;" data-i18n="公司:">公司:</label>
						 					<span class="input-icon input-icon-right" style="width:55%">
												<input value="" onfocus="this.blur()" data-comp_id="" name="company" type="text" style="float:left;margin: 2px 2px 2px 2px;width:100%; text-overflow:ellipsis" class="input-mini spinbox-input">
												<i id="btnCom_rsv" class="ace-icon fa fa-caret-down bigger-150"></i>
											</span>
							 			</div>
							 			<div class="input-group" style="width:90%">
						 					<label style="float: left;margin-top: 10px;" data-i18n="会员:">会员:</label>
						 					<span class="input-icon input-icon-right" style="width:55%">
												<input value="" onfocus="this.blur()" data-mno="" name="m_card" type="text" style="float:left;margin: 2px 2px 2px 2px;width:100%;text-overflow:ellipsis">
												<i id="btnMem_rsv" class="ace-icon fa fa-caret-down bigger-150"></i>
											</span>
							 			</div>
									</div>
								</div>
							</div>
							<div data-id="rate" class="widget-box ui-sortable-handle">
								<div class="widget-header widget-header-small">
									<h5 class="widget-title" data-i18n="费率">费率</h5>
									<div class="widget-toolbar">
										<a href="#" data-action="collapse">
											<i class="ace-icon fa fa-chevron-up"></i>
										</a>
									</div>
								</div>
								<div data-id="rateWidgetBody" class="widget-body" style="display: block;"> 
									 
									<div class="widget-main">
										<form data-id="rcode" onSubmit="return false;">  
											<div class="input-group" style="width:90%;margin-left: 10px;">  
								 				<label style="float: left;margin-top: 10px;"><strong data-i18n="价码:">价码:</strong></label> 
												<select name="rcode" style="width:50%;float:left;margin: 2px 2px 2px 2px;text-overflow:ellipsis" class="input-mini spinbox-input" ></select>
								 			</div>
								 			<div style="margin-left: 40px;">
									 			<label style="margin-top: 6px;">
													<input id="ho_rate" name="form-field-radio" type="radio" class="ace" checked>
													<span class="lbl" data-i18n="可用">可用</span>
												</label>
												<label>
													<input id="ho_rate_all" name="form-field-radio" type="radio" class="ace">
													<span class="lbl" data-i18n="全部">全部</span>
												</label>
											</div>
								 			<div class="input-group" style="width:90%;margin-left:10px;">
								 				<label style="float: left;margin-top: 10px;"><strong data-i18n="市场:">市场:</strong></label>
								 				<select name="market" data-id="select_market" class="chosen-select form-control" id="form-field-select-3" data-placeholder="请选择市场..." data-i18n-placeholder="请选择市场...">
													<option value="" data-i18n="请选择...">请选择...</option>
												</select>
								 			</div>
								 			<div class="input-group" style="width:90%;margin-left:10px"> 
								 				<label style="float: left;margin-top: 10px;"><strong data-i18n="来源:">来源:</strong></label>
								 				<select name="source" data-id="select_source" class="chosen-select form-control" id="form-field-select-4" data-placeholder="请选择来源..." data-i18n-placeholder="请选择来源...">
													<option value="" data-i18n="请选择...">请选择...</option>
												</select>
								 			</div>
								 			<div class="input-group" style="width:90%;margin-left: 40px;"> 
												<label>
													<input value="0" name="main" id="main" class="ace" type="checkbox" onchange="this.value=(this.checked==true?1:0);">
													<span class="lbl" data-i18n="打印费率">打印费率</span>
												</label>
											</div>
										</form>
									</div>
								</div>
							</div>	
						</div>



					</div>
				</div>																															
			</div>
			<div class="col-xs-9">
				<div id="roomsView" class="rvl-ftp"></div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">

	//导入资源文件 
	$(".page-content-area").ace_ajax("loadScripts", [], function() {
		/**
		 * 房态盘应用
		 * @callBackParam srv 业务实现类
		 * @callBackParam ds 数据交互类
		 */
		$.roomViewModule().then(({srv,ds})=>{

			//获取房态盘数据
			function roomViewData(replace=false){
				if(replace){
					srv.createRoomView_frameWork(srv.changeData,'#roomsView',true);
					return;
				}

				//获取房态盘数据
				ds.getRoomViewCurrentData($.extend(
						{},
						$("#form_header").HSAPI_FORMJSONDATA(),
						$("#form_content").HSAPI_FORMJSONDATA(),
						srv.getHouseKeepingSel('#houseKeepingTable'),
						{hotelId:$.HSAPI_HEADERS.hotelId}
					)).then((success)=>{
						if(success.RETURN&&success.RETURN=='1'){
							//持久化当前房态盘数据
							srv.roomViewCurrentData=success.DATA;
							srv.createRoomView_frameWork(srv.roomViewCurrentData,'#roomsView');
						}	
				});
			}

			//获取基础数据
			function defaultData(param={},callBack){
				//获取基础数据
				ds.getRoomsViewAsDefault(param).then((success)=>{
					//持久化基础数据
					srv.getRoomsViewAsDefault=success;
					callBack();
				});
			}

			//初始化
			(($)=>{
				//字典
				defaultData({},()=>{
					
					//房务表格
					let {ho_s_def=[],ho_dict=[]}=srv.getRoomsViewAsDefault;
					srv.makeHouseKeepingList(ho_s_def,'#houseKeepingTable',(data)=>roomViewData());

					//下拉列表
					$('*[data-dict]').each(function(k,v){
						sysjson2select($(v)[0], sysgetdict($(v).attr("data-dict"),ho_dict));
						$(v).bind("change",function(){
							roomViewData();
						});
					});
				});

				//色块
				roomViewData();

				//查询事件绑定
				$("#btnAllSearch").bind("click",function(){
					roomViewData();
				})

				//重置刷新
				$("#refresh").bind("click",function(){
					$("#form_header")[0].reset();
					$("#form_content")[0].reset();
					$("#houseKeepingTable").jqGrid('setSelection',$("#houseKeepingTable").jqGrid('getDataIDs')[0]);
					roomViewData();
				});

				//返回
				$("#btnCancel").bind("click",function(){
					$.HSAPI_CLOSEWINS();
				});

				//快捷键
				$.HSAPI_SETSHORTCUTKEY(function(e){
					if(e.keyCode==13){
						if($("#allSearch").is(":focus")){
							$("#btnAllSearch").trigger("click");
							$("#allSearch").select();
						}
					}
				});

				//websocket
				let treaty=$.HSAPI_SERVER.replace('http','ws').replace('https','wss');
				let wsk = new WebSocket(treaty+"/"+$.HSAPI_PACKAGENAME+"/frontofficetimerWebSocket/"+$.HSAPI_HEADERS.hotelId+"/000/websocketroomsview/"+localStorage.getItem("userid"));
				//连接成功建立的回调方法
				wsk.onopen = function () {
					console.log("通道创建成功")
				},
				wsk.onmessage = function (event) {
					// console.log(event.data) 
					try {
						if(event.data&&event.data=="[]")
							return;  
						var data=JSON.parse(event.data);
						srv.changeData=data;
						roomViewData(true);
					} catch (error) {
						return;
					}
				},
				wsk.onclose=function(){
					console.log("通道销毁")	 
				}
			})(window.jQuery||$);
		});
	});
</script>